<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="addPermission(1,'0')">添加权限</el-button>
        </template>
      </page-tools>
      <!-- 表格 -->
      <el-table border :data="list" row-key="id">
        <el-table-column align="center" label="名称" prop="name" />
        <el-table-column align="center" label="标识" prop="code" />
        <el-table-column align="center" label="描述" prop="description" />
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-button v-if="row.type===1" type="text" @click="addPermission(2,row.id)">添加</el-button>
            <el-button type="text" @click="editPermission(row.id)">编辑</el-button>
            <el-button type="text" @click="delPermission(row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--  新增编辑弹出层 -->
    <el-dialog :visible.sync="showDialog" :title="showStatus" @close="btnCancel">
      <el-form ref="formList" label-width="120px" :model="formData" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" style="width:90%" />
        </el-form-item>
        <el-form-item label="标识" prop="code">
          <el-input v-model="formData.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formData.description" style="width:90%" />
        </el-form-item>
        <el-form-item label="开启">
          <!-- 根据文档 开启与关闭如果不是布尔值就要重新配置开启与关闭的选项 1是开启状态 0是关闭状态-->
          <el-switch
            v-model="formData.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <!-- 底部保存  -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionList, delPermission, addPermission, getPermissionDetail, updatePermission } from '@/api/permisson'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Permissions',
  data() {
    return {
      list: [], // 定义数据列表
      showDialog: false, // 定义显示弹窗影藏变量
      formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 开启
      },
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showStatus() {
      return this.formData.id ? '编辑' : '添加'
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    // 定义获取权限列表数据
    async getPermissionList() {
      this.list = tranListToTreeData(await getPermissionList(), '0')
    },
    // 删除权限的方法
    async delPermission(id) {
      try {
        // 显示确定删除的显示框
        await this.$confirm('确定要删除吗?')
        await delPermission(id)
        // 提示信息
        this.$message.success('删除成功')
        // 重新获取列表
        this.getPermissionList()
      } catch (error) {
        console.log('删除失败', error)
      }
    },
    addPermission(type, pid) {
      // 根据权限类型的不同判断添加到那里 如果是当type为1时为访问权限，type为2时为功能权限 pid为0
      // 记录当前添加的标识
      this.formData.type = type
      this.formData.pid = pid
      this.showDialog = true
    },
    // 点击确定按钮提交数据
    async btnOk() {
      try {
        // 表单校验
        await this.$refs.formList.validate()
        // 判断是编辑还是添加
        if (this.formData.id) {
          // 编辑
          await updatePermission(this.formData)
        } else {
          await addPermission(this.formData)
        }
        // 发起请求 添加数据
        this.getPermissionList()
        // 提示消息
        this.$message.success('操作成功')
        // 关闭弹出层
        this.showDialog = false
      } catch (error) {
        console.log('添加失败', error)
      }
    },

    btnCancel() {
      // 取消逻辑,清空表格
      this.formData = {
        name: '',
        code: '',
        description: '',
        type: '',
        pid: '',
        enVisible: '0'
      }
      this.$refs.formList.resetFields()
      this.showDialog = false
    },
    // 编辑逻辑
    async editPermission(id) {
      // 打开弹出层
      this.showDialog = true
      // 数据回流
      this.formData = await getPermissionDetail(id)
    }
  }
}
</script>

<style>

</style>

